<template>
  <div class="bill-box">
    <div class="bill-types" @click="showTypesFn">
      {{chooseType | formatType}}
      <i class="iconfont icon-wode-zhedie"></i>
    </div>
    <div class="search-box">
      <p class="time" @click="showDateTimeFn">
        {{year}}年{{month}}月
        <i class="iconfont icon-wode-erjizhan"></i>
      </p>
      <p class="money">
        <span>支出￥{{payFee | formatMoney}}</span>
        <span>收入￥{{receiveFee | formatMoney}}</span>
      </p>
    </div>
    <div class="bill-list">
      <van-list v-model="loading" :finished="finished" finished-text="-没有更多了-" @load="onLoad">
        <div class="item van-hairline--bottom" v-for="(item,index) in billList" :key="index">
          <div class="info">
            <p class="title">{{item.title}}</p>
            <p class="time">{{item.createTime}}</p>
          </div>
          <div class="money" :class="{'active': item.transactionType == 1}">
            <p>
              <span v-if="item.transactionType == 1">-</span>
              <span v-else>+</span>
              {{item.price | formatMoney}}元
            </p>
            <p
              class="status van-hairline--surround"
              v-if="item.withdrawStatus==1"
            >{{item.withdrawStatus | formatStatus}}</p>
          </div>
        </div>
        <!-- <div class="item van-hairline--bottom">
          <div class="info">
            <p class="title">提现</p>
            <p class="time">11月28日 14:03</p>
          </div>
          <div class="money active">
            <p class="total">-100元</p>
            <p class="status van-hairline--surround">提现中</p>
          </div>
        </div>-->
      </van-list>
    </div>
    <van-actionsheet v-model="showTypes">
      <div class="type-list">
        <div class="title van-hairline--bottom">选择交易类型</div>
        <div class="type-box">
          <p
            :class="{'active': chooseType===item}"
            v-for="(item,index) in typesList"
            :key="index"
            @click="chooseTypeFn(item)"
          >{{item | formatType}}</p>
        </div>
        <div class="cancle-btn" @click="closeTypes">取消</div>
      </div>
    </van-actionsheet>
    <van-actionsheet v-model="showDateTime">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="chooseDateTimeFn"
        @cancel="closeDateTimeFn"
      />
    </van-actionsheet>
  </div>
</template>


<script>
import wechatService from 'SERVICE/wechatService'
export default {
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      payFee: '0',
      receiveFee: '0',
      loading: false,
      finished: false,
      current: 1,
      pages: 1,
      size: 10,
      billObj: {},
      billList: [],
      showTypes: false,
      typesList: ['0', '1', '2', '3'],
      chooseType: '0',
      showDateTime: false,
      currentDate: new Date(),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(),
      isOff: true
    }
  },
  created() {},
  methods: {
    onLoad() {
      // if (this.current > this.pages) {
      //   // 加载状态结束
      //   this.finished = true
      //   this.loading = false
      // } else {
        if (this.isOff) {
          this.isOff = false
          this.getBill()
        }
      // }
    },
    getLastDay(year, month) {
      var new_year = year //取当前的年份
      var new_month = month++ //取下一个月的第一天，方便计算（最后一天不固定）
      if (month > 12) {
        new_month -= 12 //月份减
        new_year++ //年份增
      }
      var new_date = new Date(new_year, new_month, 1) //取当年当月中的第一天
      return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate() //获取当月最后一天日期
    },
    getBill() {
      let date = this.getLastDay(this.year, this.month)
      wechatService
        .agentBill({
          searchTimeStr: `${this.year}-${this.month}-${date} 23:59:59`,
          size: this.size,
          type: this.chooseType == '0' ? '' : this.chooseType,
          current: this.current
        })
        .then(res => {
          this.pages = res.agentBillVOPage.pages
          if (this.current === 1) {
            this.billList = res.agentBillVOPage.records
            if (res.billMoneyVO) {
              this.payFee = res.billMoneyVO.payFee
              this.receiveFee = res.billMoneyVO.receiveFee
            }
          } else {
            this.billList.push(...res.agentBillVOPage.records)
          }
          if (this.pages <= this.current) {
            this.finished = true
          }
          this.isOff = true
          this.current += 1
          this.loading = false
        })
        .catch(err => {})
    },
    showTypesFn() {
      this.showTypes = true
    },
    closeTypes() {
      this.showTypes = false
    },
    chooseTypeFn(item) {
      this.showTypes = false
      this.chooseType = item
      this.reload()
    },
    showDateTimeFn() {
      this.showDateTime = true
    },
    chooseDateTimeFn() {
      this.showDateTime = false
      this.year = this.currentDate.getFullYear()
      this.month = this.currentDate.getMonth() + 1
      this.reload()
    },
    closeDateTimeFn() {
      this.showDateTime = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    reload() {
      this.pages = 1
      this.current = 1
      this.finished = false
      this.loading = false
      this.billList = []
      this.onLoad()
    }
  },
  filters: {
    formatType(val) {
      let type = {
        0: '全部',
        1: '广告收益',
        2: '邀请奖励',
        3: '提现'
      }
      return type[val] || '全部'
    },
    formatStatus(val) {
      let status = {
        1: '提现中',
        2: '已到账',
        3: '提现失败'
      }
      return status[val] || '未知'
    },
    formatMoney(val) {
      if (val) {
        return (val / 100).toFixed(2)
      }
      return '0.00'
    }
  }
}
</script>

<style lang="less" scoped>
.bill-box {
  font-size: 16px;
  font-weight: 400;
  color: rgba(19, 40, 77, 1);
  background-color: #f7f9fa;
  display: flex;
  flex-direction: column;
  height: 100%;
  .bill-types {
    font-size: 14px;
    height: 44px;
    background: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 44px;
    i {
      font-size: 12px;
    }
  }
  .search-box {
    padding: 16px;
    .time {
      height: 22px;
      font-size: 16px;
      line-height: 22px;
    }
    .money {
      font-size: 12px;
      font-weight: 400;
      color: rgba(156, 165, 181, 1);
      margin-top: 4px;
      span {
        margin-right: 10px;
      }
    }
  }
  .bill-list {
    background-color: #fff;
    flex: 1;
    overflow-y:auto;
    .item {
      height: 65px;
      color: #13284d;
      font-size: 16px;
      display: flex;
      align-items: center;
      margin: 0 16px;
      .info {
        .title {
        }
        .time {
          font-size: 12px;
          color: #9ca5b5;
          margin-top: 4px;
        }
      }
      .money {
        flex: 1;
        text-align: right;
        &.active {
          color: #e65e2e;
        }
        /deep/.status {
          height: 16px;
          font-size: 10px;
          display: inline-block;
          padding: 2px 4px 1px;
          margin-top: 2px;
          color: #e65e2e;
          &::after {
            border-radius: 1px;
            border-color: #e65e2e !important;
          }
        }
      }
    }
  }
  .type-list {
    .title {
      height: 62px;
      margin: 0 16px;
      text-align: center;
      line-height: 62px;
    }
    .type-box {
      margin: 22px 16px 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      p {
        width: 76px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        overflow: hidden;
        background-color: #f2f5f9;
        &.active {
          background-color: #007ae6;
          color: #fff;
        }
      }
    }
    .cancle-btn {
      height: 44px;
      background: rgba(247, 249, 250, 1);
      font-size: 16px;
      text-align: center;
      line-height: 44px;
      color: #9ca5b5;
    }
  }
}
</style>